<template>
  <custom-navbar
    title="个人亮点"
    :auto-back="true"
    left-icon-color="#303133"
  />
  <view class="min-h-100vh bg-#ffffff px-24rpx">
    <up-gap height="30rpx" />
    <view class="mb-30rpx text-[28rpx] text-[#1d2129] leading-[40rpx]">
      可多选
    </view>
    <view class="flex flex-wrap gap-20rpx pb-40rpx">
      <view class="rounded-full  px-24rpx text-center text-22rpx color-#F57100 leading-54rpx" :class="item.isActive ? 'bg-#09f' : 'bg-#fcf8e9'" v-for="item in list1" @click="getTab(item)">
        {{item.value}}
      </view>
    </view>
    <view class="mb-30rpx text-[28rpx] text-[#1d2129] leading-[40rpx]">
      自定义亮点
    </view>
    <view class="flex flex-wrap gap-20rpx pb-40rpx">
      <view class="flex items-center rounded-full  px-24rpx text-center text-22rpx color-#7B7B7B leading-54rpx" :class="item.isActive ? 'bg-#09f text-white' : 'bg-#f7f7f8'" v-for="(item, index) in list2" @click="getTab2(item)">
        <text class="mr-4rpx">
          {{item.value}}
        </text>
        <up-icon name="close" size="24rpx" @click="deleteItem(item, index)"/>
      </view>
      <view class="rounded-full bg-#e8edfe px-24rpx text-center text-22rpx color-#1F50F2 leading-54rpx" @click="addTab">
        添加
      </view>
      <u-popup :show="showAdd" @close="showAdd = false" mode="center" round="8">
        <view class="px-32rpx pt-24rpx">
          <view class="text-center text-32rpx pb-24rpx">添加</view>
          <u-input v-model="tabValue" placeholder="请输入内容" />
          <view class="flex items-center justify-center mt-24rpx text-26rpx">
            <view class="px-18rpx py-9rpx rounded-8rpx bg-#cccc" @click="cancel">取消</view>
            <view class="px-18rpx py-9rpx rounded-8rpx bg-#09f color-white ml-24rpx" @click="addNewTab">确定</view>
          </view>
        </view>
      </u-popup>
    </view>
    <view class="flex justify-center mt-24">
      <u-button type="primary" @click="onClickSubmit">确定</u-button>
    </view>
  </view>
</template>

<script setup>

import { commonUserInfoUpdate } from "@/api/user/common";
import {customerResumeUpdate} from "@/api/user/customer";
import {otherStore, useUserStore} from '@/store'

let showAdd = ref(false)
let tabValue = ref('')
let list1 = ref([])
let list2 = ref([])
let tabList = ref([])
const addTab = () => {
  showAdd.value = true
}
const cancel = () => {
  showAdd.value = false
  tabValue.value = ''
}

const highlights = reactive([])
const resumeId = ref(0)
const addNewTab = async () => {
  showAdd.value = false
  console.log(tabValue.value)
  highlights.push(tabValue.value)
  let params = {
    highlights: JSON.stringify(highlights)
  }
  let r = await commonUserInfoUpdate(params)
  if (r) {
    //更新成功
    await useUserStore().setUserInfo()
    JSON.parse(uni.getStorageSync('user')).info.highlights.map((v, i) => {
      list2.value.push({
        key: i+1,
        value: v
      })
    })
  }
  tabValue.value = ''

}
//进行添加
const getTab = (item) => {
  list1.value.map(v => {
    if (v.value === item.value) {
      v.isActive = !v.isActive
    }
  })
}
const getTab2 = async (item) => {
  list2.value.map(v => {
    if(v.value === item.value) {
      v.isActive = !v.isActive
    }
  })
}

const resetList = () => {
  let arr = [...list1.value, ...list2.value]
  console.log(arr)
  arr.map(v => {
    if(v.isActive) {
      tabList.value.push(v.value)
    }
  })
  // otherStore().setHeightProts(tabList.value)
  // console.log(otherStore().$state.liangdian)
  // uni.redirectTo({
  //   url: '/pages/userinfo/resume-create'
  // })
}

const deleteItem = (item, index) => {
  list2.value.splice(index, 1)
}

onMounted(() => {
  let value = JSON.parse(uni.getStorageSync('config')).configCli
  list1.value = value.config_resume_highlights$$简历亮点配置
  JSON.parse(uni.getStorageSync('user')).info.highlights.map((v, i) => {
    list2.value.push({
      key: i+1,
      value: v
    })
  })
})

const onClickSubmit = async () => {
  let arr = [...list1.value, ...list2.value]
  console.log(arr)
  arr.map(v => {
    if(v.isActive) {
      tabList.value.push(v.value)
    }
  })
  console.log('亮点arr：：：', tabList.value)
  console.log('简历ID：：：', resumeId.value)
  // return
  if (resumeId.value == 0) {
    uni.showToast({title: '简历异常'})
    return
  }
  let params = {
    id: resumeId.value,
    highlights: JSON.stringify(tabList.value)
  }
  console.log('参数：：：', params)
  let r = await customerResumeUpdate(params)
  if (r) {
    console.log('个人亮点更新到简历成功  返回上级')
    otherStore().setHeightProts(tabList.value)
    uni.navigateBack()
  } else {
    uni.showToast({title: '个人亮点更新到简历失败'})
  }
}
onLoad((query) => {
  if (query.resumeId) {
    console.log('个人亮点页获取简历ID', query.resumeId)
    resumeId.value = query.resumeId
  }
})
</script>

<style lang="scss" scoped>

</style>
